<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <Link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script>
        function isNull(str) {
            if(str == ""){
                return true;
            }
            var regu = "^[]+$";
            var re = new RegExp(regu);
            return re.test(str);
        }
        $(function () {
            $("#zhuce").click(function(){
                var s = $("#addUser").css("display");
                if(s == "none"){
                    $("#addUser").css("display","block");
                    $("#denglu").css("display","none");
                }else{
                    $("#addUser").css("display","none");
                }
            })

            $("#fanhui").click(function(){
                var s = $("#denglu").css("display");
                if(s == "none"){
                    $("#denglu").css("display","block");
                    $("#addUser").css("display","none");
                }else{

                }
            })
            $("#add").click(function () {
                var nameVal = $("#name2").val();
                var pwdVal = $("#password2").val();
                var pwdVal2 = $("#password3").val();
                var sexVal =  $('input:radio:checked').val();
                var ageVal = $("#age").val();
                var roleVal = $("#role").val();
                if (isNull(nameVal) || isNull(pwdVal) || isNull(pwdVal2) ||sexVal === undefined || isNull(ageVal) || isNull(roleVal)) {
                    confirm("请完善信息");
                    return;
                }else if(pwdVal != pwdVal2 ){
                    confirm("两次密码不同！")
                    return;
                }
                var param = {
                    "username": nameVal,
                    "password": pwdVal2,
                    "sex":sexVal,
                    "age":ageVal,
                    "role":roleVal
                };
                $.ajax({
                    url: "/addUser",
                    data: param,
                    async: true,
                    success: function f(result) {
                        window.confirm(result.msg);
                        location.href = "/";
                    }
                })
                return false;
            })
        })
    </script>
    <style>
        #user{
            width: 400px;
            height: 400px;
            position: relative;
            margin: 0 auto;
            margin-top: 130px;
            border-radius: 20px;
            background-color:rgba(4,5,3,.1);
        }
        #denglu{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: absolute;
            transition: all 1s;
        }
        .dis{
            border-radius: 5px;
            margin-top: 10px;
        }
        #addUser{

            margin: 0 auto;
            position: absolute;
            display: none;
            transition: all 1s;
            margin-top: -40px;
        }
        .s{
            margin-left: 80px;
            margin-top: 130px;
        }
        #login{
            margin-top: 20px;
            margin-left: 60px;

        }
        #zhuce{
            margin-left: 40px;
        }

        #add{
            margin-top: 20px;
            margin-left: 60px;
        }
        #fanhui{
            margin-left: 40px;
        }
        #role{
            width: 180px;
            margin-left: -5px;
            margin-top: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="user">
    <div id="denglu">
        <div style="position: absolute;left: 180px;top: 60px;">
            <h3 style="text-align: center;">登陆</h3>
        </div>
        <form class="s" role="form" action="/loginIn" method="post">
            <span>账号：</span><input class="dis" type="text" id="name1" name="name" placeholder="请输入账号">
            <br>
            <span>密码：</span><input class="dis" type="password" id="password1" name="password" placeholder="请输入密码">
            <br>
            <input type="submit" id="login" value="登陆">
            <input id="zhuce" type="button" value="注册">
        </form>
    </div>
    <div id="addUser">
        <div style="position: absolute;left: 180px;top: 60px;">
            <h3 style="text-align: center;">注册</h3>
        </div>
        <form class="s" name="addUser" method="post">
            <span>账号：</span><input class="dis" type="text" id="name2" name="name2" placeholder="请输入账号">
            <br>
            <span>密码：</span><input class="dis" type="password" id="password2" name="password2" placeholder="请输入密码">
            <br>
            <span>密码：</span><input class="dis" type="password" id="password3" name="password3" placeholder="请再次输入密码">
            <br>
            性别：男：<input name="sex" type="radio" value="男" />
            女：<input name="sex" type="radio" value="女" />
            <br>
            <span>年龄：</span><input class="dis" type="text" id="age" name="age" placeholder="请输入年龄">
            <br>
            <span>角色：</span>
            <select name="role" id="role">
                <option>admin</option>
                <option>user</option>
            </select>
            <input id="add" type="submit" value="注册"/>
            <input id="fanhui" type="button" value="返回"/>
        </form>

    </div>
</div>

</body>
</html>